<template>
    <div class="app-container">
        <div class="pageTitle">
            <div class="pageTitleSub">
                <el-form ref="queryForm" :model="queryParams" label-width="100px" size="small">
                    <el-row :gutter="5">
                        <el-col :span="6">
                            <el-form-item label="车牌号" prop="plateNo">
                                <el-input v-model="queryParams.plateNo" placeholder="请输入车牌号" clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="开始时间" prop="startGmtEntry">
                                <el-date-picker
                                    v-model="queryParams.startGmtEntry"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束时间" prop="endGmtEntry">
                                <el-date-picker
                                    v-model="queryParams.endGmtEntry"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="pageBtn" style="position: relative;">
                <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                <el-button size="small" type="primary" icon="el-icon-search" @click="showTrans">超限车台账</el-button>
                <el-button size="small" type="primary" icon="el-icon-search" @click="showOther">非超限车台账</el-button>
                <!--                <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
                <!--                <el-button size="small" icon="el-icon-refresh" @click="opengpy">高拍仪</el-button>-->

            </div>
        </div>

        <page-main>
            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"
                      header-cell-class-name="table-header" style="width: 100%;" border
                      :row-class-name="tableRowClassName">
                <el-table-column label="入档时间" width="180" prop="gmtArchive">
                    <template slot-scope="scope">
                        {{ moment(scope.row.gmtArchive).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="overloadPlateNo"
                    label="超限车车牌号码"
                    align="center" width="120"
                    show-overflow-tooltip/>
                <!--                <el-table-column-->
                <!--                    prop="pass_time"-->
                <!--                    label="违法(过车)时间"-->
                <!--                    width="180"-->
                <!--                    align="center">-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <span>-->
                <!--                            {{ scope.row.pass_time.replace(/T/," ").substring(0,19) }}-->
                <!--                        </span>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                    prop="overloadDriverName"
                    label="超限车驾驶员姓名"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="overloadDriverIdcard"
                    label="超限车驾驶员身份证号"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="overloadVehicleHeight"
                    label="超限车车高"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="overloadVehicleWidth"
                    label="超限车车宽"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="overloadVehicleLength"
                    label="超限车车长"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="transferPlateNo"
                    label="转运车车牌号码"
                    align="center"
                    width="180"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="transferDriverName"
                    label="转运车驾驶员姓名"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>

                <el-table-column
                    prop="transferDriverIdcard"
                    label="转运车驾驶员身份证号"
                    width="100"
                    align="right"/>
                <!--                <el-table-column-->
                <!--                    prop="case_handling_time"-->
                <!--                    label="处罚决定日期"-->
                <!--                    width="180"-->
                <!--                    align="center"-->
                <!--                    show-overflow-tooltip>-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <span>-->
                <!--                            {{ scope.row.case_handling_time.replace(/T/," ").substring(0,19) }}-->
                <!--                        </span>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                    prop="transferVehicleHeight"
                    label="转运车车高"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="transferVehicleWidth"
                    label="转运车车宽"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="transferVehicleLength"
                    label="转运车车长"
                    align="center"
                    width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop=""
                    label="操作"
                    fixed="right" align="center"
                    width="750">
                    <template slot-scope="scope">
                        <!--                        <el-button type="text" size="small" icon="el-icon-search" @click="openXayy(scope.row)">销案原因</el-button>-->
                        <el-button type="text" size="small" icon="el-icon-document-checked"
                                   @click="showZfws(scope.row)">执法文书
                        </el-button>
                        <el-button type="text" size="small" icon="el-icon-document" @click="showViews(scope.row)">查看详情
                        </el-button>
                        <el-button type="text" size="small" icon="el-icon-document" @click="handleViews(scope.$index)">
                            查看超限车详情
                        </el-button>
                        <el-button type="text" size="small" icon="el-icon-document"
                                   @click="handleViewsTran(scope.$index)">查看转运车详情
                        </el-button>
                        <el-button size="small" type="text" icon="el-icon-view" @click="showUnloadVideo(scope.$index)">
                            查看卸货详情
                        </el-button>
                        <el-button size="small" type="text" icon="el-icon-view" @click="showRoomAskVideo(scope.$index)">
                            查看办公室询问视频
                        </el-button>

                        <!--                        <el-button type="text" size="small" icon="el-icon-document" @click="closeCase(scope.$index)">销案撤销</el-button>-->
                    </template>
                </el-table-column>
            </el-table>

            <div class="Pagination">
                <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="queryParams.CurrentPage"
                    :page-size="20"
                    :page-sizes="[20]"
                    :total="totalCount"
                    @current-change="handleCurrentChange"/>
            </div>
        </page-main>

        <el-dialog title="案件处理" :visible.sync="dialogCaseInfoVisible"
                   width="1300px">
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <CaseInformation :information="informationhistory"
                                     :limit-info="limitInfo" :show="show"
                                     @cancelEstablishingCase="dialogCaseInfoVisible = false"/>
                </el-tab-pane>
                <!--                <el-tab-pane label="文书信息">-->
                <!--                    <InstrumentInfo :_event="wsEvent" :limit-info="limitInfo"-->
                <!--                                    :current-process-id="currentProcessId"/>-->
                <!--                </el-tab-pane>-->
            </el-tabs>

        </el-dialog>
        <!--        <el-dialog title="案件处理" :visible.sync="dialogCaseInfoVisible" width="1300px">-->
        <!--            <el-tabs type="border-card">-->
        <!--                <el-tab-pane label="基本信息">-->
        <!--                    <CaseInformation :information="information" :limit-info="limitInfo" :show="show" @cancelEstablishingCase="closeDialog" />-->
        <!--                </el-tab-pane>-->
        <!--            </el-tabs>-->
        <!--            <el-row :gutter="8" style="margin-top: 15px;">-->
        <!--                <el-col :span="12" :offset="12">-->
        <!--                    <el-row>-->
        <!--                        <el-col :span="6"><el-button type="primary" size="mini" plain style="width: 80px;" @click="dialogCaseInfoVisible = false">关闭</el-button></el-col>-->
        <!--                    </el-row>-->
        <!--                </el-col>-->
        <!--            </el-row>-->
        <!--        </el-dialog>-->
        <el-dialog title="执法文书"
                   :visible.sync="zfws"
                   width="70%">
            <InstrumentInfo :_event="wsEvent" :limit-info="limitInfo"
                            :current-process-id="currentProcessId"/>
        </el-dialog>

        <el-dialog
            :title="wenzi"
            :visible.sync="dialogVisible"
            top="50px"
            center="true"
            width="80%">
            <iframe :src="src"
                    style="width: 100%; min-height: 600px;"/>
        </el-dialog>

        <ExamDetail
            ref="examDetail"
            :total="totalCount"
            :table-size="tableSize"
            :current-page="queryParams.CurrentPage"
            :init-detail-data="detailData"
            :oid="overloadEntranceid"
            :tid="transferEntranceid"
            :sta="sta"
            :indexs="index"
            step="qt"
            @handleViews="handleViews"
            @getList="handleCurrentChange"/>

        <unloadVideo
            ref="unloadVideo"
            :init-detail-data="detailData"
            :sta="sta"
            step="qt"
            :wja-type="wjaType"
            :wja="wja"
            :sign="sign"
            @handleViews="handleViews"
            @handleViewsTrans="handleViewsTran"
            @getList="handleCurrentChange"
        />

        <roomAskVideo
            ref="roomAskVideo"
            :evidenceVideoPath="evidenceVideoPath"
            :init-detail-data="detailData"
            :sta="sta"
            step="qt"
            :wja-type="wjaType"
            :wja="wja"
            :sign="sign"
            @handleViews="handleViews"
            @handleViewsTrans="handleViewsTran"
            @getList="handleCurrentChange"
        />

        <Gpy
            ref="gpy"
            step="qt"
            @handleViews="handleViews"
            @getList="handleCurrentChange"/>

    </div>
</template>
<script>
    // import {InquiryCaseCanceled, SelectBasicInformation, InquiryResult, CaseClosedRate, SelectCaseCanceledCause, CaseRevocation} from '@/api/overrunPenaltyApi';
    import moment from 'moment';
    // import CrossingSelect from '@/modules/components/CrossingSelect';
    // import DictSelect from '@/modules/components/DictSelect';
    // import CaseInformation from '@/modules/components/caseInfo/caseInformation';
    import ExamDetail from '@/modules/components/examDetail';
    import Gpy from '@/modules/information-query/gpy';
    import {getArchiveHistory, PlacedCaseSummaryTable} from '@/api/parkUnloadApi';
    import InstrumentInfo from '@/modules/components/instrument-info/index';
    import CaseInformation from '@/modules/components/caseInfo/casehistoryInformation';
    import unloadVideo from '@/modules/information-query/historyunloadVideo';
    import roomAskVideo from '@/modules/information-query/roomAskVideo';
    export default {
        name: 'illegal-vehicle-archive',
        components: {
            // CrossingSelect, DictSelect, CaseInformation,
            ExamDetail,
            Gpy,
            InstrumentInfo,
            CaseInformation,
            unloadVideo,
            roomAskVideo
        },
        data() {
            return {
                dialogVisible: false,
                dialogCaseInfoVisible: false,
                xalVisible: false,
                xal: {},
                sta: '',
                crossing_arr: [],
                queryParams: {
                    plateNo: '',
                    CurrentPage: 1
                },
                isLoading: false,
                tableData: [],
                detailData: {},
                overloadEntranceid: 0,
                transferEntranceid: 0,
                index: 0,
                tableSize: 0,
                totalCount: 0,
                dialogCaseInfoVisible: false,
                // 案件基本信息
                information: {},
                informationhistory: {},
                // 超限信息
                limitInfo: {},
                currentProcessId: '',
                show: true,
                xayyFlag: false,
                xayy: {},
                xayylb: {},
                zfws: false,

            };
        },
        created() {

        },
        mounted() {
            this.getList();
            // DictionariesGroup({Group: '2005'}).then(res => {
            //     res.res.SiteMap.forEach(x => {
            //         this.xayylb[x.sysdict_code + ''] = x.sysdict_name;
            //     });
            // }).catch(err => {
            //     console.log(err);
            // });
        },

        methods: {
            showRoomAskVideo(i){
                this.detailData = this.tableData[i];
                this.evidenceVideoPath = this.tableData[i].evidenceVideoPath;
                this.$refs['roomAskVideo'].show();
            },
            showUnloadVideo(i){
                // debugger
                this.detailData = this.tableData[i];
                // debugger
                this.detailData.entrance_id = this.tableData[i].overloadEntranceHistoryId;
                this.sign = 'vehicle-illegal-confirm';
                this.$refs['unloadVideo'].show();
            },
            showTrans() {
                this.wenzi = '超限车台账';
                let param = {
                    plateNo: this.queryParams.plateNo,
                    startGmtEntry:this.queryParams.startGmtEntry,
                    endGmtEntry:this.queryParams.endGmtEntry,
                    Table: '1',
                };
                PlacedCaseSummaryTable(param).then(res => {
                    console.log(res.res.PlacedCaseSummaryTable);
                    this.src = res.res.PlacedCaseSummaryTable;
                    this.dialogVisible = true;
                }).catch(err => {
                    console.log(err);
                    this.$message({
                        message: '统计失败！',
                        type: 'error'
                    });
                });
            },
            showOther() {
                this.wenzi = '非超限车台账';
                let param = {
                    plateNo: this.queryParams.plateNo,
                    startGmtEntry:this.queryParams.startGmtEntry,
                    endGmtEntry:this.queryParams.endGmtEntry,
                    Table: '2',
                };
                PlacedCaseSummaryTable(param).then(res => {
                    console.log(res.res.PlacedCaseSummaryTable);
                    this.src = res.res.PlacedCaseSummaryTable;
                    this.dialogVisible = true;
                }).catch(err => {
                    console.log(err);
                    this.$message({
                        message: '统计失败！',
                        type: 'error'
                    });
                });
            },
            tableRowClassName({row, rowIndex}) {
                if (((this.$refs['examDetail'] && this.$refs['examDetail'].outerVisible || this.xayyFlag || this.dialogFormVisible || this.dialogCaseInfoVisible) && row == this.detailData)) {
                    return 'selected-row';
                }
                return '';
            },
            openXayy(row) {
                this.detailData = row;
                SelectCaseCanceledCause({process_id: row.process_id}).then(res => {
                    console.log(res.res);
                    this.xayyFlag = true;
                    if (res.res.SelectCaseCanceledCause && res.res.SelectCaseCanceledCause.length > 0) {
                        this.xayy = res.res.SelectCaseCanceledCause[0];
                        var reg = new RegExp('\\"', 'g');
                        var reg1 = new RegExp(' ', 'g');
                        var reg2 = new RegExp('\\r\\n', 'g');
                        this.xayy.closecase_reason_list = res.res.SelectCaseCanceledCause[0].closecase_reason_list.replace(reg1, '');
                        this.xayy.closecase_reason_list = this.xayy.closecase_reason_list.replace(reg2, '');
                        this.xayy.closecase_reason_list = this.xayy.closecase_reason_list.replace('[', '');
                        this.xayy.closecase_reason_list = this.xayy.closecase_reason_list.replace(']', '');
                        this.xayy.closecase_reason_list = this.xayy.closecase_reason_list.replace(reg, '').split(',');
                        console.log('aa');
                        console.log(this.xayy.closecase_reason_list);
                    }

                }).catch(err => {
                    console.log(err);
                    this.$message({
                        message: '查询失败！',
                        type: 'error'
                    });
                });
            },

            moment,
            showViews(row) {
                this.limitInfo = row;
                this.informationhistory = row;
                this.dialogCaseInfoVisible = true;
            },
            handleViews(i) {
                this.index = i;
                this.sta = '';
                this.detailData = this.tableData[i];
                this.detailData.plateNo = this.tableData[i].overloadPlateNo;
                this.overloadEntranceid = this.tableData[i].overloadEntranceHistoryId;
                this.transferEntranceid = 0;
                this.sta = "历史档案";
                this.$refs['examDetail'].show();
                this.$forceUpdate();

            },
            handleViewsTran(i) {
                this.index = i;
                this.sta = '';
                this.detailData = this.tableData[i];
                this.detailData.plateNo = this.tableData[i].transferPlateNo;
                this.overloadEntranceid = 0;
                this.transferEntranceid = this.tableData[i].transferEntranceHistoryId;
                this.sta = "历史档案";
                if (this.detailData.plateNo != null) {
                    this.$refs['examDetail'].show();
                    this.$forceUpdate();
                } else {
                    this.$message({
                        message: '没有数据',
                        type: 'warning'
                    });
                }


            },
            handleQuery() {
                this.getList();
            },

            opengpy() {
                // alert("123");
                this.$refs['gpy'].show();
                // this.$refs['examDetail'].show();
            },

            handleCurrentChange(val) {
                this.queryParams.CurrentPage = val;
                this.getList();
            },
            getList() {
                this.isLoading = true;
                // this.queryParams.Crossing_id = this.crossing_arr.join(',');
                // if (!this.queryParams.Pass_time1) {
                //     this.queryParams.Pass_time1 = '';
                // }
                // if (!this.queryParams.Pass_time2) {
                //     this.queryParams.Pass_time2 = '';
                // }

                getArchiveHistory(this.queryParams).then(res => {
                    this.isLoading = false;
                    this.tableData = res.res.getArchiveHistory;
                    this.tableSize = this.tableData.length;
                    if (this.tableData && this.tableData.length > 0) {
                        this.totalCount = this.tableData[0].totalCount;
                    }

                }).catch(err => {
                    this.isLoading = false;
                    console.log(err);
                });
            },
            // 销案信息撤回
            closeCase(i) {
                let param = {
                    // 获取role_id
                    role_id: this.$store.state.user.role_id,
                    // 获取违法过车记录id
                    violative_alarm_id: this.tableData[i].violative_alarm_id,
                    // 获取违法处理信息表id
                    process_id: this.tableData[i].process_id
                };
                this.$confirm('此操作将撤销车辆到初审, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    CaseRevocation(param).then(res => {
                        // || res.res.violative_alarm_id == this.tableData[i].violative_alarm_id
                        if (res.res.CaseRevocation == '撤销成功') {
                            this.$message({
                                message: '撤销成功',
                                type: 'success'
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.res.CaseRevocation,
                                type: 'warning'
                            });
                        }
                    }).catch(err => {
                        console.log(err);
                    });
                });
                // this.getList();
            },

            showZfws(row) {
                this.detailData = row;
                this.currentProcessId = row.archiveId;
                this.limitInfo = row;
                console.log("查看limitinfo");
                console.log(this.limitInfo);
                this.wsEvent = '2';
                this.zfws = true;
                // let param = {
                //     process_id: row.process_id
                // };
                // // 获取案件基本信息
                // SelectBasicInformation(param).then(res => {
                //     this.information = res.res.SelectBasicInformation[0];
                //     this.limitInfo = row;
                //     this.dialogCaseInfoVisible = true;
                // }).catch(err => {
                //     console.log(err);
                // });
            },
            closeDialog() {
                this.dialogCaseInfoVisible = false;
            }
        }
    };
</script>

<style scoped>
    .table-header {
        background-color: #f8f8f8 !important;
    }
    /deep/
    .el-table td {
        padding: 5px 0 !important;
    }
    /deep/
    .el-button--text {
        padding: 7px 0;
    }
</style>


